
import React, { Component } from "react";
import { Descriptions, Table, Button, Divider, Tag, Rate, Switch, Select, Modal, message, Popconfirm,
    Form, Input, Badge, Progress } from 'antd';
import { CaretUpOutlined, CaretDownOutlined, BarsOutlined, SearchOutlined, RedoOutlined, CaretRightOutlined, PlusOutlined } from '@ant-design/icons';
import  LocalizedModal  from './modal/modal';
import Breadcrumbs from "../../components/component/Breadcrumb/breadcrumb";
import style from './cityInfo.css'

const xian = ['雁塔区', '莲湖区', '新城区', '未央区', '长安区', '灞桥区', '高陵区', '临潼区', '沣东新城', '沣西新城', '秦汉新城', '泾河新城', '空港新城']
export default class extends Component {
  constructor() {
    super();
    this.state = {
      hasSelected:true,
      data:[],
      selectedRowKeys: [],
      loading: false,
      visible:false,
      titles:{},
      titler:'新增数据',
      editVisible:false,
      row:{},
      area:'',
      cityName:'',
      columns: [
        {
          title: '市区名称',
          dataIndex: 'name',
          width:190
        },       
        {
          title: '面积(KM²)',
          dataIndex: 'age',         
        },
        {
          title: '区政府地址',
          dataIndex: 'address',
          width:130,
          ellipsis:true,
        },
        {
          title: 'GDP',
          dataIndex: 'gdpNum',
        },
        {
          title: 'GDP增长率',
          dataIndex: 'upRate',
          width:80,
          ellipsis:true,
          render:(_,record) =>  record.key % 3 >1 ? <span><CaretUpOutlined style={{color:'rgb(135, 208, 104)'}}  /> {record.upRate}%</span> : <span><CaretDownOutlined style={{color:'#FF4D4F'}} /> {record.upRate}%</span>
        },     
        {
          title: 'GDP排名',
          dataIndex: 'gdp',
        }, 
        {
          title: '固定资产投资',
          dataIndex: 'invest',
          width:100,
          ellipsis:true,
        },         
        {
          title: '民生支出',
          dataIndex: 'live',
        },  
        {
          title:'人均可支配收入',
          dataIndex:'insert',
          width:110,
          ellipsis:true,
        },                   
        {
          title: '城市化率',
          dataIndex: 'rate',
        },
        {
          title: '人口',
          dataIndex: 'people',
        },
        {
          title: '城镇人口占比',
          align:'center',
          dataIndex: 'peopleRate',
          width:100,
          ellipsis:true,
        },
        {
          title: '标签',
          dataIndex: 'tags',
          render: (_, record) => {
                return (
                  record.key % 3 >1 ?
                  <Tag color='#91caff' key={record.key}>
                    景点区
                  </Tag>:
                  <Tag color='#5cdbd3' key={record.key}>
                    经济特区
                  </Tag>
                );
              },           
        }, 
        {
          title: '数据状态',
          dataIndex: 'status',
          render:(_,record)=>{
            if(record.status % 2 == 1){
                return  <Switch checked={true} />
            }else{
              return  <Switch checked={false} />
            }
          }
        },                   
        {
          title: '操作',
          width:'15%',
          render:(_,record)=>{
            return(
              <>
                  <span style={{marginRight:10}}><a onClick={()=>{ this.showModal(record)}}>详情</a></span>
                  <span style={{marginRight:10}}><a onClick={()=>{ this.edit(record)}}>数据更改</a></span>
                  <span style={{marginRight:10}}>
                    <Popconfirm
                        title="确定下发当前数据吗？"
                        onConfirm={this.confirms}
                        onCancel={this.cancels}
                        okText="确定"
                        cancelText="取消"
                      >
                        <a href="#">数据下发</a>
                      </Popconfirm>   
                  </span>
              </>
            )
          }
        }
      ]
    };
  }

  componentDidMount() {
      this.getDatas();
      window.scrollTo(0, 0);
  }

  confirms = () => {
    message.success('数据下发成功!请去数据中心查看!');
    this.start();
  };
  
  cancels = () => {
    message.error('下发数据取消！');
  };

  edit = (item) =>{
    this.setState({titler:'数据更改',editVisible:true,row:item});
  }

  add = () =>{
    this.setState({titler:'数据新增',editVisible:true,row:null});
  }

  start = () => {
    this.setState({ loading: true,data: [], area:'',cityName:'' },()=>{
      this.getDatas();
    });
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false,
      });
      
    }, 1000);
  };

  getDatas = ()=>{
    let datas= [];
    for (let i = 0; i < 13; i++) {
      datas.push({
        key: i,
        name: i > 7 ?  `西咸新区${xian[i]}`: `西安市${xian[i]}`,
        age: (Math.random()*55).toFixed(2),
        invest:Math.floor(Math.random() * 100)+'亿元',
        insert: Math.floor(Math.random() * 100000)+'元',
        address: `西安市-${xian[i]}第${i*i}号`,
        tags: i,
        gdp: Math.floor(Math.random() * 10),
        live: Math.floor(Math.random() * 19.6)+'亿元',
        gdpNum: Math.floor(Math.random() * 13),
        upRate: Math.floor(Math.random() * 9),
        rate: Math.floor(Math.random() * 50)+'%',
        peopleRate: Math.floor(Math.random() * 15)+'%',
        status:Math.floor(Math.random() * 1000),
        people: Math.floor(Math.random() * 100)+'万人',
      });
    }
    this.setState({data:datas})
  }

  filterData = () =>{
    let das = this.state.data;
    if(this.state.area!= ''){
        let arr = das.filter(item => item.age == this.state.area);
        this.setState({data:arr});
    }
    if(this.state.cityName!= ''){
      let arr = das.filter(item => item.name == this.state.cityName);
      this.setState({data:arr});
    }

  }

  areaChange = (e) => {
    this.setState({area:e.target.value})
  }

  nameChange = (e) => {
    this.setState({cityName:e.target.value})
  }

  showModal = (item) => {
      this.setState({
        visible: true,
        titles:item
      });
  };

  hideModal = () => {
    this.setState({
      visible: false,
    });
  };

  onShowSizeChange = (current, pageSize) => {
    console.log(current, pageSize);
    this.setState({current:current,pageSize:pageSize})
  };

  onSelectChange = selectedRowKeys => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

  handleOk = () =>{
    if(this.state.titler == '新增数据'){
      this.setState({editVisible:false},()=>{
        message.success('新增数据成功!');
        this.start();
      })
    }else{
      this.setState({editVisible:false},()=>{
        message.success('完成数据更改!');
        this.start();
      })
    }

  }

  handleCancel = () =>{
    this.setState({editVisible:false});
  }

  onFinish = (values) => {
    console.log('Success:', values);
  };

  render() {
    const { loading, selectedRowKeys, hasSelected, data, visible, columns, titles, editVisible, row, area, cityName, titler } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    return (
      <>
        <div style={{marginLeft:0}}>
          <Breadcrumbs props={this.props}></Breadcrumbs>
        </div> 
        <Divider />          
        <div style={{padding:20}}>
          <div style={{width:'90%',marginLeft:20}}>
          <h3 style={{fontWeight:600,marginBottom:12}}><BarsOutlined style={{fontSize:20}} /> 城市基本信息</h3>
            <Descriptions style={{textAlign:'left'}} layout="horizontal">
              <Descriptions.Item label="城区面积">10810KM²</Descriptions.Item>
              <Descriptions.Item label="人口">1510万人</Descriptions.Item>
              <Descriptions.Item label="GDP">10589亿</Descriptions.Item>
              <Descriptions.Item label="城市位置">
                东经:108.369548  北纬:36.952148
              </Descriptions.Item>
              <Descriptions.Item label="机场"><a>西安咸阳国际机场、西安航天基地机场</a></Descriptions.Item>
              <Descriptions.Item label="GDP最高区" >未央区凤城八路未央广场</Descriptions.Item>
              <Descriptions.Item label="邮政编码" >710000</Descriptions.Item>
              <Descriptions.Item label="车牌代码">陕A、陕D、陕U <a>[14]  [187]</a> </Descriptions.Item>
              <Descriptions.Item label="火车站">西安站、西安北站、西安南站等</Descriptions.Item>
              <Descriptions.Item label="城市名片" span={3}>陕西省省会、副省级市、特大城市、 [133]  西安都市圈核心区、 [168]  关中平原城市群核心城市，国务院批复确定的中国西部地区重要的中心城市，国家重要的科研、教育和工业基地。</Descriptions.Item>
            </Descriptions>            
          </div>
          <div style={{width:'94%',margin:20}}>
            <Descriptions title="西安市城市综合指标排名" bordered>
              <Descriptions.Item label="新一线城市综合排名">11</Descriptions.Item>
                <Descriptions.Item label="GDP排名">23位</Descriptions.Item>
                <Descriptions.Item label="科技创新指数">1级</Descriptions.Item>
                <Descriptions.Item label="综合制造指数排名">16名</Descriptions.Item>
                <Descriptions.Item label="城市发展指数">
                  <Badge status="processing" text="发展中城市" />
                </Descriptions.Item>
                <Descriptions.Item label="城市化率">
                  <Progress style={{width:'98%'}} percent={59} status="active" />
                </Descriptions.Item>
                <Descriptions.Item label="国家文明城市评级">
                  <Rate disabled defaultValue={3.5} />
                </Descriptions.Item>
            </Descriptions>            
          </div>          
          <Divider />
          <div style={{marginLeft:20}}>
              <div style={{ marginBottom: 16, marginLeft:12 }}>
                <div style={{margin:'30px 0'}}>   
                  <Button type="primary" style={{marginRight:30}} onClick={this.add} disabled={!hasSelected} loading={loading}><PlusOutlined /> 新增数据</Button>                 
                  <span>城区 : </span><Input style={{width:180, marginRight:15}} value={cityName} onChange={this.nameChange} allowClear placeholder="输入城区搜索" />
                  <span>面积 : </span><Input style={{width:180, marginRight:15}} value={area} onChange={this.areaChange} allowClear placeholder="输入面积搜索" />
                  <span>状态 : </span>
                  <Select
                    defaultValue="全部"
                    style={{
                      width: 160,
                      marginRight:15
                    }}
                    options={[
                      {
                        value: '全部',
                        label: '全部',
                      },
                      {
                        value: '开启',
                        label: '开启',
                      },
                      {
                        value: '关闭',
                        label: '关闭',
                      },
                    ]}
                  />
                  <Button type="primary" style={{marginRight:15}} onClick={this.filterData} disabled={!hasSelected} loading={loading}><SearchOutlined /> 搜索</Button>
                  
                  <Button style={{marginRight:15}} onClick={this.start} disabled={!hasSelected} loading={loading}><RedoOutlined /> 重置</Button>
                  <Button type="primary" style={{marginLeft:30,marginRight:15}} onClick={this.start} disabled={!hasSelected} >数据修正</Button>
                  <Button type="primary" style={{marginRight:15}} onClick={this.start} disabled={!hasSelected} >批量调用</Button>  
                </div>
              </div>
              <Table size="middle" rowSelection={rowSelection} columns={columns} loading={loading} dataSource={data} 
                pagination={{
                pageSizeOptions:['5','10','20'],
                showSizeChanger: true,
                onShowSizeChange:this.onShowSizeChange,
                showTotal: (total) => `总数${total}`
              }}/>
          </div>
        </div>
              <div style={{textAlign:'left'}}>
                <LocalizedModal visible={visible} hideModal={this.hideModal} titles={titles}></LocalizedModal>
              </div>        
            <Modal title={titler} visible={editVisible} onOk={this.handleOk} onCancel={this.handleCancel}>
              <div>
                <Form
                  name="basic"
                  labelCol={{
                    span: 6,
                  }}
                  wrapperCol={{
                    span: 18,
                  }}
                  initialValues={{
                    gdp: row == null ? '' : row.gdp,
                    gdpNum: row == null ? '' : row.gdpNum,
                    upRate: row == null ? '' : row.upRate,
                  }}
                  onFinish={this.onFinish}
                  autoComplete="off"
                >
                  <Form.Item
                    label="GDP排名"
                    name="gdp"
                    rules={[
                      {
                        required: true,
                        message: '请输入GDP数据!',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item
                    label="GDP(生产总值)"
                    name="gdpNum"
                    rules={[
                      {
                        required: true,
                        message: '请输入GDP数据',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item
                    label="GDP增长率"
                    name="upRate"
                    rules={[
                      {
                        required: true,
                        message: '请输入GDP增长率数据',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>                  
                </Form>                  
              </div>
            </Modal>
      </>
    )
    }
}
